<template>
  <div>
    <!-- Hero Section -->
    <section class="relative pt-20 pb-32 overflow-hidden">
  <div aria-hidden="true" class="absolute inset-0 bg-gradient-to-br from-blue-600/10 to-purple-600/10 pointer-events-none"></div>
      <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
          <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6 animate-fade-in">
            <span class="text-gradient">在线工具</span><br>
            <span class="text-2xl md:text-3xl font-normal text-gray-600">让工作更高效</span>
          </h1>
          <p class="text-xl text-gray-600 mb-8 max-w-3xl mx-auto animate-slide-up">
            无需注册，完全使用。所有工具都在浏览器中运行，保护您的隐私安全。
            文本处理、图片编辑、编码转换等多种实用工具一应俱全。
          </p>
          
          <!-- Search Bar -->
          <div class="max-w-2xl mx-auto mb-12 animate-slide-up">
            <div class="relative">
              <input 
                v-model="searchQuery"
                type="text" 
                placeholder="搜索工具..." 
                class="w-full px-6 py-4 text-lg border-2 border-gray-300 rounded-full focus:border-blue-500 focus:outline-none transition-colors"
                @keyup.enter="searchTools"
                @input="showResults = !!searchQuery.trim()"
              >
              <button 
                @click="searchTools"
                class="absolute right-2 top-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white p-2 rounded-full hover:shadow-lg transition-all"
              >
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
              </button>
            </div>

            <!-- Search Results Dropdown -->
            <div v-if="searchQuery.trim() && showResults" class="mt-3 max-w-2xl mx-auto bg-white border border-gray-200 rounded-lg shadow-lg">
              <ul>
                <li v-for="tool in filteredTools" :key="tool.id" class="px-4 py-3 hover:bg-gray-50">
                  <NuxtLink :to="tool.path" class="flex justify-between items-start space-x-3">
                    <div class="flex-1">
                      <div class="text-sm font-medium text-gray-900" v-html="highlight(tool.name, searchQuery)"></div>
                      <div class="text-xs text-gray-500 mt-1" v-html="highlight(tool.description, searchQuery)"></div>
                    </div>
                    <div class="text-xs text-blue-600 ml-3">打开 →</div>
                  </NuxtLink>
                </li>
                <li v-if="filteredTools.length === 0" class="px-4 py-3 text-sm text-gray-500">未找到相关工具</li>
              </ul>
            </div>
            <!-- Partner Link (显眼的合作伙伴链接) -->
            <!-- 小屏幕纵向排列，md 及以上横向排列，保持间距和居中 -->
            <div class="mt-4 flex flex-col md:flex-row items-center space-y-3 md:space-y-0 md:space-x-3 justify-center">
              <a
                href="https://1000tool.com/?ref=88box.com"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="千盒工具"
                class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-red-500 to-pink-500 text-white font-semibold rounded-full shadow-lg hover:shadow-xl hover:scale-105 transition-transform"
              >
                千盒工具
                <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Tool Categories -->
    <section class="py-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">工具分类</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

          
          <!--Ai tools-->
          <NuxtLink to="/ai-tools" class="tool-card group">
            <div class="text-center">
              <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                <!-- 更符合“智能算命/AI”语义的聊天气泡图标 -->
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <!-- 三个点表示对话 -->
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10h.01" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 10h.01" />
                  <!-- 聊天气泡外形 -->
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12c0 4.418-4.03 8-9 8a9.172 9.172 0 01-4.255-1L3 21l1.255-3.745A9.172 9.172 0 015 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 mb-2">智能算命</h3>
              <p class="text-gray-600 text-sm">智能对话等</p>
            </div>
          </NuxtLink>

          <NuxtLink to="/video-tools" class="tool-card group">
            <div class="text-center">
              <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14v-4zM3 7a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2V9a2 2 0 00-2-2H3z" />
                </svg>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 mb-2">视频工具</h3>
              <p class="text-gray-600 text-sm">在线录屏，视频压缩、格式转换、编辑处理，m3u8地址转MP4 ,视频加水印等</p>
            </div>
          </NuxtLink>

          <!-- Text Tools -->
          <NuxtLink to="/text-tools" class="tool-card group">
            <div class="text-center">
              <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 mb-2">文本工具</h3>
              <p class="text-gray-600 text-sm">文本处理、格式转换、字符编码等</p>
            </div>
          </NuxtLink>

          <!-- Image Tools -->
          <NuxtLink to="/image-tools" class="tool-card group">
            <div class="text-center">
              <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 mb-2">图片工具</h3>
              <p class="text-gray-600 text-sm">图片压缩、格式转换、编辑处理等</p>
            </div>
          </NuxtLink>

          <!-- Encode Tools -->
          <NuxtLink to="/encode-tools" class="tool-card group">
            <div class="text-center">
              <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                </svg>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 mb-2">编码转换</h3>
              <p class="text-gray-600 text-sm">Base64、URL编码、哈希计算等</p>
            </div>
          </NuxtLink>

          <!-- Generator Tools -->
          <NuxtLink to="/generator-tools" class="tool-card group">
            <div class="text-center">
              <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"></path>
                </svg>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 mb-2">生成工具</h3>
              <p class="text-gray-600 text-sm">二维码、条形码、UUID生成等</p>
            </div>
          </NuxtLink>


          <NuxtLink to="/game-tools" class="tool-card group">
            <div class="text-center">
              <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 15a3 3 0 01-3-3V9a3 3 0 013-3h12a3 3 0 013 3v3a3 3 0 01-3 3H6z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12v.01M15 12v.01M12 9v6" />
                </svg>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 mb-2">游戏工具</h3>
              <p class="text-gray-600 text-sm">在线游戏、贪吃蛇，五指棋等</p>
            </div>
          </NuxtLink>

          <NuxtLink to="/live-tools" class="tool-card group">
            <div class="text-center">
              <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                <!-- 替换为更符合“生活工具”语义的房屋图标 -->
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 11.5L12 4l9 7.5V20a1 1 0 01-1 1h-5v-6a1 1 0 00-1-1H10a1 1 0 00-1 1v6H4a1 1 0 01-1-1V11.5z" />
                </svg>
              </div>
              <h3 class="text-xl font-semibold text-gray-900 mb-2">生活工具</h3>
              <p class="text-gray-600 text-sm">实时金价查询、天气预报等</p>
            </div>
          </NuxtLink>
        </div>
      </div>
    </section>

    <!-- Popular Tools -->
    <section class="py-16 bg-white/50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">热门工具</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div v-for="tool in popularTools" :key="tool.id" class="tool-card">
            <div class="flex items-start space-x-4">
              <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="tool.icon"></path>
                </svg>
              </div>
              <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ tool.name }}</h3>
                <p class="text-gray-600 text-sm mb-3">{{ tool.description }}</p>
                <NuxtLink :to="tool.path" class="text-blue-600 hover:text-blue-800 font-medium text-sm">
                  开始使用 →
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Features -->
    <section class="py-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">为什么选择我们</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="text-center">
            <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center mx-auto mb-4">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">完全</h3>
            <p class="text-gray-600">所有工具完全使用，无需付费，无隐藏收费</p>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mx-auto mb-4">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">隐私保护</h3>
            <p class="text-gray-600">所有处理都在本地浏览器完成，数据不会上传到服务器</p>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mx-auto mb-4">
              <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
              </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">快速便捷</h3>
            <p class="text-gray-600">无需注册登录，打开即用，操作简单直观</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { allTools } from '~/composables/allTools'
const searchQuery = ref('')
const showResults = ref(false)

// 计算过滤结果：基于 popularTools 的 name、description、path
const filteredTools = computed(() => {
  const q = (searchQuery.value || '').trim().toLowerCase()
  if (!q) return []
  // 使用全量工具列表进行搜索（包含 game-tools / video-tools）
  return allTools.filter((tool) => {
    return (
      (tool.name || '').toLowerCase().includes(q) ||
      (tool.description || '').toLowerCase().includes(q) ||
      (tool.path || '').toLowerCase().includes(q)
    )
  })
})

const highlight = (text, q) => {
  if (!q) return text
  const escaped = q.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
  const re = new RegExp(`(${escaped})`, 'ig')
  return text.replace(re, '<mark class="bg-yellow-200 text-yellow-900 rounded-sm px-0.5">$1</mark>')
}

const searchTools = async () => {
  const q = (searchQuery.value || '').trim()
  if (!q) {
    showResults.value = false
    return
  }

  // 如果只有一个匹配项，直接跳转到该工具页面
  if (filteredTools.value.length === 1) {
    const path = filteredTools.value[0].path || '/'
    // 使用 Nuxt 的导航函数
    try {
      navigateTo(path)
    } catch (e) {
      // 如果 navigateTo 不可用，降级为 location.assign
      window.location.href = path
    }
    return
  }

  // 否则显示下拉结果供用户点击选择
  showResults.value = true
  console.log('搜索:', q, '命中:', filteredTools.value.length)
}

const popularTools = [
  {
    id: 1,
    name: '短链生成器',
    description: '短链接生成器，快速创建易记的短链接，互联网分享的利器',
    path: '/live-tools/short-link',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 2,
    name: 'm3u8转MP4',
    description: '将m3u8格式的视频链接转换为MP4格式',
    path: '/video-tools/m3u8',
    icon: 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'
  },
  {
    id: 3,
    name: '网页图片提取器',
    description: '提取网页中的图片资源',
    path: '/image-tools/webpage-extractor',
    icon: 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'
  },
  {
    id: 4,
    name: '在线抠图',
    description: '在线抠图工具，轻松去除图片背景',
    path: '/image-tools/remove-bg',
    icon: 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'
  },
  {
    id: 5,
    name: '随机点名',
    description: '生成随机点名信息',
    path: '/live-tools/random-names',
    icon: 'M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'
  },
  {
    id: 6,
    name: '在线剪切板',
    description: '随时随地分享和存储文本内容',
    path: '/text-tools/clipboard',
    icon: 'M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4'
  }
]

// SEO
useHead({
  title: '八八在线工具 - 在线工具集合',
  meta: [
    { name: 'description', content: '在线工具集合，提供文本处理、图片编辑、编码转换、二维码生成等多种实用工具' },
    { property: 'og:title', content: '八八在线工具 - 在线工具集合' },
    { property: 'og:description', content: '在线工具集合，提供文本处理、图片编辑、编码转换、二维码生成等多种实用工具' },
    { property: 'og:type', content: 'website' }
  ]
})
</script>